<script setup>
// setup 语法糖是让 script 中变成组合式 API 开发模式
// 添加了 setup 会将当前 script 变成一个生命周期，因为会在创建之前被执行
// 在这里组件还没有被创建，所以无法在这里使用 this 

import { getCurrentInstance, ref } from 'vue'

// 获取当前组件实例，相当于this
const { ctx } = getCurrentInstance()

// console.log(ctx);

// 直接创建的变量可以被使用但是不具备响应式
let count = 100

function addClick() {
    console.log('被点击了' + count);
    count++
    ctx.$forceUpdate()
}
// ---------------------------
/*
    proxy({
        getValue(){},
        setValue(){}
    })

*/
// ref 用来定义响应式数据的方法，使用的时候需要加一个 .value,在模板中{{}}不需要加 .value
let message = ref('你笑起来真好看')
function changeMessageClick() {
    // console.log(message.value);
    message.value = '像春天的花一样'
}
</script>

<!-- <script>
export default{
    data() {
        return {
            message: '你笑起来真好看'
        }
    },
    // 相当于生命周期函数，比beforeCreate 更早执行
    setup(){}
}
</script> -->
<template>
    <div>
        <h1>组合式 API</h1>
    <!--
        在选项式API中通过 data 来定义响应式数据 
        在组合式API中通过 ref 来定义响应式数据
      -->
    <h1>{{ count }} - {{ message }}</h1>
    <button @click="addClick">点击增加</button>
    <button @click="changeMessageClick">修改 Message</button>
    </div>
</template>
